<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 爱心点赞</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 0;
        margin: 100px auto;
        position: relative;
    }

    div i {
        position: absolute;
        color: #CCC;
        cursor: pointer;
    }

    i.heart {
        animation: heart 0.3s linear  alternate;
    }

    @keyframes heart {
        to {
            color: #FF6666;
            transform: scale(3);
            opacity: 0;
        }
    }
</style>

<body>
    <div class="container">
        <i class="fa fa-heart"></i>
    </div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[0];
        div.onclick = function () {
            var i = document.createElement("i");
            i.className = "fa fa-heart heart";
            div.appendChild(i);
            setTimeout(function () {
                div.removeChild(i);
            }, 300)
        }
    </script>
</body>

</html>